<template>
    
    <MenuPage 
        :data="eventList" 
        :columns="columns"
        :page.sync="query.pageIndex"
        :size.sync="query.pageSize"
        :total="totalCount"
        :loading="tableLoading"
        @queryFun="getDataList">
        <template slot="search">
            <Button type="primary" ghost class="md-add-jh" @click="getModalInfo('')"
                >创建{{pageBtnTxt}}</Button
            >
            <Divider type="vertical" style="margin: 10px 0px 10px 10px" />
            <div style="height: 32px; line-height: 32px; margin-left: 15px; flex-shrink: 0">
                <Checkbox v-model="creatByMeModal" @on-change="searchCreatedByMe"
                    >由我创建</Checkbox
                >
            </div>
            <Select filterable
                v-model="queryTerms.useType"
                style="width: 150px; margin-left: 15px"
                clearable
                placeholder="用途类型"
                @on-change="changePage(1)"
            >
                <Option :value="1" label="培训" />
                <Option :value="2" label="演练" />
                <Option :value="3" label="竞赛" />
            </Select>
            <!-- <Select filterable v-model="queryTerms.eventType" style="width:150px;margin-left: 15px" clearable placeholder="事件类型" @on-change="changePage(1)">
                <Option :value="1" label="软件"/>
                <Option :value="2" label="脚本"/>
                <Option :value="3" label="工具"/>
                <Option :value="4" label="其他"/>
            </Select> -->
            <Input
                v-model.trim="queryTerms.name"
                placeholder="事件场景名称"
                @on-change="changePage(1)"
                clearable
                style="width: 180px; margin-left: 15px"
            ></Input>
            <!-- <Input v-model.trim="queryTerms.fileName" placeholder="时间文件名称" @on-change="changePage(1)" clearable style="width:180px;margin-left: 15px"></Input> -->
            <Button
                class="header-btn"
                type="primary"
                ghost
                style="height: 32px; margin-left: 5px"
                @click="refreshIcon()"
                ><i class="el-icon-refresh-right"
            /></Button>
        </template>
    <Modal
        v-model="modalData.show"
        :title="modalData.title"
        @on-ok="saveModal"
        @on-cancel="cancel('formValidate')"
        :loading="modalData.loading"
        :mask-closable="false"
        width="550"
    >
        <Form
            :label-width="100"
            :model="formValidate"
            :rules="ruleValidate"
            ref="formValidate"
            style="width: 520px"
        >
            <FormItem label="事件场景名称" prop="name">
                <Input
                    v-model.trim="formValidate.name"
                    placeholder='请输入不能包含下列任意英文字符 \ / : * ? " < > |，长度为1-128个字符'
                ></Input>
            </FormItem>
            <FormItem label="用途类型" prop="useType">
                <Select filterable v-model="formValidate.useType" clearable>
                    <Option :value="1" label="培训" />
                    <Option :value="2" label="演练" />
                    <Option :value="3" label="竞赛" />
                </Select>
            </FormItem>
            <!-- <FormItem label="是否开放" prop="survey">
                <Select filterable v-model="formValidate.survey" clearable>
                    <Option :value="0" label="关闭"/>
                    <Option :value="1" label="开放"/>
                </Select>
            </FormItem> -->
            <!-- <FormItem label="事件类型" prop="eventType">
                <Select filterable v-model="formValidate.eventType" clearable>
                    <Option :value="1" label="软件"/>
                    <Option :value="2" label="脚本"/>
                    <Option :value="3" label="工具"/>
                    <Option :value="4" label="其他"/>
                </Select>
            </FormItem> -->
            <!-- <FormItem label="上传事件文件" prop="file">
                <Upload
                    ref='uploadFile' :action="upLoadUrl" :before-upload="handleUploadIcon" :show-upload-list="false">
                    <Button icon="ios-cloud-upload-outline" :disabled="loading">选择文件</Button>
                </Upload>
                <div v-if="formValidate.file && formValidate.file.name">
                    <p>文件名: {{ formValidate.file.name}}</p>
                    <p>大小：<span v-text="fileSize"></span></p>
                    <Progress :percent="progress"></Progress>
                    <p>速度：<span v-text="speed"></span></p>
                </div>
                <div v-else-if="formValidate.fileName">
                    <p>文件名: {{ formValidate.fileName}}</p>
                </div>
            </FormItem> -->
            <FormItem label="事件描述" prop="description">
                <Input
                    v-model.trim="formValidate.description"
                    type="textarea"
                    :maxlength="200"
                    :autosize="{ minRows: 2, maxRows: 5 }"
                    placeholder="描述信息"
                ></Input>
            </FormItem>
        </Form>
    </Modal>
    <DrawerPage
        :title="drawer.title"
        v-model="drawer.show"
        class="deviceDrawer"
        :columns="drawer.columns" 
        :data="drawer.list"
        :total="drawer.total"
        :size.sync="referenceQuery.pageSize"
        :page.sync="referenceQuery.pageIndex"
        @queryFun="getEventReferencelist"
    >
    </DrawerPage>
</MenuPage>
</template>
<script>
import encryption from '@/libs/encryption.js';
import { validateName } from '@/libs/reg';
import {
    createEvent,
    deleteEvent,
    getEventlist,
    updateEvent,
    getEventReferencelist,
    eventBindProject,
} from '@/api/event';
import { creatBlankPro, deployProject } from '@/api/homer';
import pageTitle from '@/mixin/pageTitle';
import {validateName1,validateNameCustom } from '@/libs/reg.js'
export default {
    mixins: [pageTitle],
    props: ['show'],
    data() {
        let September = sessionStorage.getItem('November');
        September = JSON.parse(encryption.SelfUseDecrypt(September));
        const validateUpload = (rule, value, callback) => {
            if (this.formValidate.file === null) {
                callback(new Error('请上传文件'));
            } else {
                callback();
            }
        };
        const validateName = (rule, value, callback) => {
            if (value) {
                validateNameCustom(rule, value, callback, 128)
            } else {
                callback();
            }
        };
        return {
            eventId: '',
            projectId: '',
            referenceQuery: {
                pageIndex: 1,
                pageSize: 10,
                eventId: '',
            },
            drawer: {
                show: false,
                total: 0,
                list: [],
                title: '',
                columns: [
                    {
                        title: '引用处',
                        key: 'refName',
                        tooltip: true,
                    },
                    {
                        title: '引用人',
                        key: 'creatorName',
                        tooltip: true,
                    },
                    {
                        title: '引用时间',
                        key: 'createTime',
                        tooltip: true,
                    },
                    {
                        title: '引用类型',
                        key: 'type',
                        render: (h, params) => {
                            return h('span', this.typeFilter(params.row.type));
                        },
                    },
                ],
            },
            checkIcon: require('../../assets/project/magnifier-h.png'),
            checkIconDisabled: require('../../assets/project/magnifier-s.png'),
            upLoadUrl: '/api/minio/upload/permanent',
            USER_ID: September.userId,
            isRootDesigner: September.isRootDesigner,
            query: {
                pageIndex: 1,
                pageSize: 10,
            },
            queryTerms: {},
            eventList: [],
            totalCount: 0,
            tableLoading:true,
            columns:[
                {
                    type:"link",
                    title:'名称',
                    key:'name',
                    tooltip:true,
                    fun:this.toDetail
                },
                {
                    type:'Tag',
                    title:'是否开放',
                    key:'survey',
                    tooltip:true,
                    filter:(survey) => {
                        return survey === 0 ? '否' : '是'
                    },
                    setColor:(survey) => {
                        return survey === 0 ? 'var(--status-no)' : 'var(--status-yes)'
                    }
                },
                {
                    title:'用途类型',
                    key:'useTypeText',
                    tooltip:true,
                },
                {
                    title:'工程模板',
                    key:'prjTmplName',
                    tooltip:true,
                },
                {
                    title:'工程模板',
                    key:'prjTmplName',
                    tooltip:true,
                },
                {
                    title:'事件描述',
                    key:'description',
                    tooltip:true,
                },
                {
                    title:'创建者',
                    key:'creatorName',
                    tooltip:true,
                },
                {
                    title:'创建时间',
                    key:'createTime',
                    tooltip:true,
                },
                {
                    title:'操作',
                    key:'action',
                    width:300,
                    opList:[
                        {
                            txt:(data) => {
                                return data.survey === 0 ? '开放' : '关闭'
                            },
                            title:(data) => {
                                return data.survey === 0 ? '确认开放？' : '确认关闭？'
                            },
                            fun:(data) => {
                                this.changeSurvey(data.survey === 0 ? 1 : 0, data);
                            },
                            tooltip:true
                        },
                        {
                            txt:'创建工程',
                            fun:this.deployProject,
                            tooltip:true,
                            title:'确定要根据这个事件场景创建工程吗？',
                            disabled:(data) => {
                                return data.prjTmplId == null ||
                                data.prjTmplId == undefined ||
                                this.setIsClick(data) ||
                                data.projectId
                            }
                        },{
                            txt:'查看引用',
                            disabled:this.setIsClick,
                            fun:this.checkInfo
                        },
                        {
                            txt:'修改',
                            fun:this.getModalInfo,
                            disabled:this.setIsClick
                        },
                        {
                            txt:'删除',
                            type:'delete',
                            tooltip:true,
                            title:'确定要删除吗？',
                            fun:this.getModalInfo,
                            disabled:this.setIsClick
                        }
                    ]
                }
            ],
            detailText: '',
            modalData: {
                show: false,
                loading: true,
                add: true,
                title: '创建事件场景',
            },
            formValidate: {
                creator: this.USER_ID,
                name: '', //CVE编号
                useType: '', //事件描述
                eventType: '',
                survey: 0,
                file: {}, //镜像名称
                description: '', //可见范围
            },
            ruleValidate: {
                name: [
                    {
                        required: true,
                        max: 128,
                        message: '名称长度为1—128字符',
                        trigger: 'change, blur',
                    },
                    { required: true, validator: validateName, trigger: 'change, blur' },
                ],
                useType: [
                    {
                        required: true,
                        message: '用途类型不能为空',
                        type: 'number',
                        trigger: 'change',
                    },
                ],
                type: [
                    {
                        required: true,
                        message: '时间类型不能为空',
                        type: 'number',
                        trigger: 'change',
                    },
                ],
                file: [{ required: true, validator: validateUpload, trigger: 'change' }],
            },
            speed: 0,
            loaded: 0,
            progress: 0,
            filename: '',
            dockerFilename: '',
            showTip: false,
            isUpdataing: true,
            fileSize: 0,
            loading: false,
            // 显示
            showDataList: true,
            showDefImg: false,
            creatByMeModal: false,
            delDocIds: [],
            saveModalStatusArr: [],
            formatArr: [
                'xz',
                'bin',
                'dmp',
                'dms',
                'rmvb',
                'midi',
                'exe',
                'xml',
                'jar',
                'qxd',
                'wks',
                'ram',
                'zip',
                'rar',
                'apr',
                'ac',
                '7z',
                'mpg',
                'lnk',
                'png',
                'eps',
                'ott',
                'ra',
                '123',
                'au',
                'dwg',
                'aw',
                'doc',
                'odp',
                'rm',
                'odt',
                'nsf',
                'aac',
                'lwp',
                'log',
                'vsd',
                'flac',
                'dot',
                'mid',
                'wma',
                'mif',
                'cmx',
                'wmf',
                'arc',
                'vcd',
                'epub',
                'pgm',
                'vcf',
                'kmz',
                'jpeg',
                '3gp',
                'mar',
                'xlsx',
                'ntf',
                'wmv',
                'fli',
                'wmz',
                'rtf',
                'fdf',
                'docx',
                'xpi',
                'flv',
                'pps',
                'asf',
                'ppt',
                'kwd',
                'cod',
                'xps',
                'com',
                'msf',
                'msi',
                'swf',
                'iso',
                'bmp',
                'asx',
                'oga',
                'hqx',
                'ogg',
                'p10',
                'rmi',
                'tif',
                'ico',
                'mkv',
                'sxd',
                'sxc',
                'ogv',
                'prc',
                'ogx',
                'sxi',
                'cpt',
                'xar',
                'spf',
                'chm',
                'wpd',
                'mdb',
                'webp',
                'adp',
                'webm',
                'gpx',
                'spl',
                'pptx',
                'sxw',
                'mdi',
                'wps',
                'psd',
                'tiff',
                'eml',
                'aiff',
                'cab',
                'gif',
                'mmf',
                'fm',
                'vob',
                'caf',
                'rgb',
                'cap',
                'dtd',
                'avi',
                'cat',
                'sil',
                'm4a',
                'bz2',
                'class',
                'jpe',
                'sit',
                'jpg',
                'pcx',
                'dll',
                'org',
                'ttf',
                'xla',
                'hlp',
                'wav',
                'm4v',
                'pdb',
                'wri',
                'mp4',
                'mp3',
                'pdf',
                'obj',
                'pls',
                'csh',
                'mny',
                'pub',
                'xls',
                'dmg',
                'glb',
                'txt',
                'json',
                'md',
            ],
            timeOut: null,
        };
    },
    computed: {
        isOwn: function () {
            return this.USER_ID == this.formValidate.creator || !this.formValidate.creator;
        },
    },
    filters: {},
    methods: {
        async deploy() {
            this.$nextTick(() => {
                console.log(1231231231);
                deployProject(this.projectId)
                    .then(({ data = {} }) => {
                        let { code, message } = data;
                        if (code === 1) {
                            // 部署成功，获取部署状态
                            // this.getProjectDetail(this.$route.query.projectId)
                            this.$Message.success(message);
                        } else if (code === 3) {
                            // 校验中，持续获取部署状态
                            this.$Message.warning(message);
                            // this.getProjectDeployDetail(this.$route.query.projectId, true)
                        } else {
                            this.$Message.warning(message);
                        }
                    })
                    .catch(() => {
                        this.$Message.error('部署异常');
                    });
                // }).catch(() => {
                //     this.$Message.error('查询工程状态异常，无法部署')
                // })
            });
        },
        changeSurvey(val, item) {
            this.$set(item, 'survey', val);
            updateEvent(item).then((res) => {
                if (res.code == 1) {
                    this.$Message.info(`${val === 1 ? '开放' : '关闭'}成功`);
                } else {
                    this.$Message.warning(res.message);
                }
            });
        },
        // 工具绑定的工程模板创建工程
        deployProject(item) {
            this.eventId = item.id;
            creatBlankPro(
                item.prjTmplId,
                {
                    description: '',
                    name: item.name,
                    quotaTypeId: '2',
                },
                'complete'
            )
                .then(({ data = {} }) => {
                    let { code, message, attribute } = data;
                    if (code === 2) {
                        this.projectId = attribute.result.id;

                        this.$Message.success(
                            '创建工程成功并开始部署，自动跳转至主页，请于工程列表中查看创建的工程'
                        );
                        this.$router.push({
                            name: 'homer',
                        });
                        console.log(this.projectId, 'this.projectIdthis.projectId');
                        this.BindProject();
                    } else {
                        this.$Message.warning(message);
                    }
                })
                .catch(() => {
                    this.$Message.error('创建工程异常');
                });
        },
        BindProject() {
            eventBindProject(this.eventId, this.projectId)
                .then((res) => {
                    if (res.code == 1) {
                        // this.$Message.success('事件与工程已绑定')
                        this.deploy();
                    } else {
                        this.$Message.warning(res.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        toDetail(item) {
            sessionStorage.setItem(
                'queryObj',
                JSON.stringify({
                    page: this.query.pageIndex,
                    useType: this.queryTerms.useType,
                    name: this.queryTerms.name,
                    designer: this.creatByMeModal ? this.USER_ID : '',
                })
            );
            this.$router.push({
                name: 'sceneBankDetail',
                query: {
                    id: item.id,
                    projectId: item.projectId,
                    name: item.name,
                    prjTmplId: item.prjTmplId,
                },
            });
        },
        typeFilter(val) {
            switch (String(val)) {
                case '0':
                    return '场景';
                case '1':
                    return '课程';
                case '2':
                    return '课件';
                case '2':
                    return '视频';
                default:
                    return '';
            }
        },
        videoOnChange(num) {
            this.referenceQuery.pageIndex = num;
        },
        checkInfo(item) {
            this.referenceQuery.pageIndex = 1;
            this.referenceQuery.eventId = item.id
            // {
            //     pageIndex: 1,
            //     pageSize: 10,
            //     eventId: item.id,
            // };
            this.getEventReferencelist();
            this.drawer.show = true;
            this.drawer.title = `${item.name} - 引用`;
        },
        getEventReferencelist() {
            this.drawer.list = [];
            getEventReferencelist(this.referenceQuery).then(({ code, message, data }) => {
                if (code !== 1) {
                    this.$Message.warning(message);
                    return;
                }
                this.drawer.total = data.total;
                this.drawer.list = data.items || [];
            });
        },
        handleUploadIcon(file) {
            this.speed = 0;
            this.loaded = 0;
            this.progress = 0;
            this.isUpdataing = true;
            this.onlyFileName = file.name + '_' + new Date().getTime();
            if (file) {
                if (file.size > 1024 * 1024) {
                    this.fileSize =
                        (Math.round((file.size * 100) / (1024 * 1024)) / 100).toString() + 'MB';
                } else {
                    this.fileSize = (Math.round((file.size * 100) / 1024) / 100).toString() + 'KB';
                }
                //验证名称
                if (file.name) {
                    let name = this.getFileName(file.name);
                    let reg = new RegExp('^[\u4E00-\u9FA5a-zA-Z0-9_ -]*$');
                    if (!reg.test(name) || name.length > 64) {
                        this.$Message.error({
                            content:
                                '文件名称只能包含中文、英文、数字、下划线、-，名称长度为1-64个字符',
                            duration: 3,
                        });
                        return false;
                    }
                }
            }
            let exceededNum = file.name.lastIndexOf('.');
            let exceededStr = file.name
                .substring(exceededNum + 1, file.name.length)
                .trim()
                .toLowerCase();
            if (exceededStr && this.formatArr.indexOf(exceededStr) > -1) {
                this.formValidate.file = file;
                let imageArr = [
                    'jpeg',
                    'jpg',
                    'jpe',
                    'png',
                    'gif',
                    'tiff',
                    'bmp',
                    'dwg',
                    'psd',
                    'ico',
                    'rgb',
                    'ogx',
                    'pcx',
                    'mdi',
                    'tif',
                    'pgm',
                    'cmx',
                    'webp',
                ];
                let docsArr = [
                    'pdf',
                    'doc',
                    'docx',
                    'xls',
                    'xlsx',
                    'xla',
                    'pptx',
                    'pps',
                    'ppt',
                    'rtf',
                    'txt',
                    'md',
                ];
                let othersArr = ['zip', 'bz2', '7z', 'cab', 'rar', 'epub'];
                let videoArr = [
                    'mp4',
                    'webm',
                    'ogv',
                    'ogg',
                    '3gp',
                    '3g2',
                    'm4v',
                    'mpg',
                    'vob',
                    'fli',
                    'mkv',
                    'asf',
                    'asx',
                    'wmv',
                    'flv',
                    'avi',
                ];
                let audioArr = [
                    'm4a',
                    'sil',
                    'ra',
                    'ram',
                    'au',
                    'wma',
                    'aiff',
                    'mp3',
                    'mid',
                    'midi',
                    'rmi',
                    'oga',
                    'wav',
                    'caf',
                    'flac',
                    'adp',
                    'aac',
                ];
                let bucket = 'files',
                    type = 'files';
                if (imageArr.includes(exceededStr)) {
                    bucket = 'images';
                    type = 'images';
                } else if (docsArr.includes(exceededStr)) {
                    bucket = 'docs';
                    type = 'docs';
                } else if (othersArr.includes(exceededStr)) {
                    bucket = 'files';
                    type = 'files';
                } else if (videoArr.includes(exceededStr)) {
                    bucket = 'videos';
                    type = 'videos';
                } else if (audioArr.includes(exceededStr)) {
                    bucket = 'audios';
                    type = 'audios';
                } else if (exceededStr == 'glb') {
                    bucket = 'relay';
                    type = 'glb';
                } else {
                    bucket = 'files';
                    type = 'files';
                }
                let _this = this;
                let formData = new window.FormData();
                formData.append('file', file);
                this.axios({
                    method: 'post',
                    url: `${this.upLoadUrl}?bucket=${bucket}&type=${type}`,
                    headers: {
                        'Content-type': 'multipart/form-data',
                    },
                    timeout:0,
                    data: formData,
                    onUploadProgress: (progressEvent) => {
                        var complete = Math.floor(
                            (progressEvent.loaded / progressEvent.total) * 100
                        );
                        _this.progress = complete;
                        function getspeed() {
                            var aaspeed = Number(progressEvent.loaded - _this.loaded) || 0;
                            _this.loaded = progressEvent.loaded;
                            _this.progress = Math.floor(
                                (progressEvent.loaded / progressEvent.total) * 100
                            );
                            if (aaspeed > 1024 * 1024) {
                                _this.speed =
                                    (Math.round((aaspeed * 100) / (1024 * 1024)) / 100).toString() +
                                    'MB/s';
                            } else {
                                _this.speed =
                                    (Math.round((aaspeed * 100) / 1024) / 100).toString() + 'KB/s';
                            }
                        }
                        setInterval(getspeed(), 1000);
                    },
                }).then(({ data = {} }) => {
                    if (data.code == 1) {
                        let file = data;
                        let src = file.data;
                        this.showTip = false;
                        this.filename = file.info.originalName;
                        this.formValidate.fileName = file.info.originalName;
                        this.formValidate.path = src;
                        this.formValidate.fileId = file.info.id;
                    } else {
                        this.$Message.warning(data.message);
                    }
                });
                return false;
            } else {
                this.uploadFile = null;
                this.formValidate.file = '';
                this.$Message.error({
                    content: '不支持当前文件类型',
                    duration: 3,
                });
                return false;
            }
        },
        getFileName(name) {
            return name.substring(0, name.lastIndexOf('.'));
        },
        // 设置高度
        setStyle() {
            window.fullHeight = document.documentElement.clientHeight;
            window.fullWidth = document.documentElement.clientWidth;
            this.fullHeight = window.fullHeight;
            this.fullWidth = window.fullWidth;
            this.setTableHei = this.fullHeight - 197;
            this.query.pageSize = Math.floor(this.setTableHei / 96) || 1;
        },
        searchCreatedByMe(val) {
            this.query.pageIndex = 1;
            this.getDataList();
        },
        useTypeFliter(val) {
            switch (String(val)) {
                case '1':
                    return '培训';
                case '2':
                    return '演练';
                case '3':
                    return '竞赛';
                default:
                    return '';
            }
        },
        eventTypeFliter(val) {
            switch (String(val)) {
                case '1':
                    return '软件';
                case '2':
                    return '脚本';
                case '3':
                    return '工具';
                case '4':
                    return '其他';
                default:
                    return '';
            }
        },
        getDataList() {
            this.showDataList = false;
            this.showDefImg = true;
            this.tableLoading = true;
            this.queryTerms.creator = this.creatByMeModal ? this.USER_ID : '';
            getEventlist(Object.assign(this.queryTerms, this.query))
                .then(({ code, message, data = {} }) => {
                    if (code !== 1) {
                        this.$Message.warning(message);
                        this.showDataList = false;
                        this.showDefImg = true;
                        return;
                    }
                    this.totalCount = data.total;
                    let list = data.items || [];
                    this.eventList = list.map((item) => {
                        return Object.assign(item, {
                            useTypeText: this.useTypeFliter(item.useType),
                            eventTypeText: this.eventTypeFliter(item.eventType),
                        });
                    });
                    if (data.items.length > 0) {
                        this.showDataList = true;
                        this.showDefImg = false;
                    } else {
                        this.showDataList = false;
                        this.showDefImg = true;
                    }
                    this.tableLoading = false;
                })
                .catch(() => {
                    this.$Message.error('获取事件列表异常');
                    this.showDataList = false;
                    this.showDefImg = true;
                    this.tableLoading = false;
                });
        },
        deleteEvent(item) {
            deleteEvent(item.id).then((data) => {
                if (data.code == 1) {
                    this.$Message.info('删除成功');
                    if (this.query.pageIndex > 1 && this.eventList.length === 1) {
                        this.query.pageIndex -= 1;
                    }
                    this.getDataList();
                } else {
                    this.$Message.warning(data.message);
                }
            });
        },
        createData() {
            let obj = JSON.parse(JSON.stringify(this.formValidate));
            delete obj.file;
            if (obj.id) {
                updateEvent(obj).then((res) => {
                    this.cancelLoading('modalData');
                    if (res.code == 1) {
                        this.$Message.info('修改成功');
                        this.modalData.show = false;
                        this.getDataList();
                    } else {
                        this.$Message.warning(res.message);
                    }
                });
            } else {
                createEvent(obj).then((data) => {
                    this.cancelLoading('modalData');
                    if (data.code == 1) {
                        this.$Message.info('创建成功');
                        this.modalData.show = false;
                        this.refreshIcon();
                    } else {
                        this.$Message.warning(data.message);
                    }
                });
            }
        },
        saveModal() {
            this.$refs['formValidate'].validate((valid) => {
                if (valid) {
                    this.createData();
                } else {
                    this.cancelLoading('modalData');
                }
            });
        },
        getModalInfo(data) {
            this.modalData.show = true;
            this.modalData.title = '修改事件场景';
            this.modalData.add = false;
            this.showTip = false;
            this.filename = '';
            this.dockerFilename = '';
            if (data) {
                this.formValidate = JSON.parse(JSON.stringify(data));
                console.log(123, this.formValidate);
            } else {
                delete this.formValidate.id;
                this.modalData.show = true;
                this.modalData.add = true;
                this.modalData.title = '创建事件场景';
                this.cancel('formValidate');
            }
        },
        changePage(page) {
            this.query.pageIndex = page;
            this.getDataList();
        },
        changeSize(size) {
            this.query.pageSize = size;
            this.getDataList();
        },
        refreshIcon() {
            this.query = {
                pageIndex: 1,
                pageSize: 10,
            };
            this.queryTerms = {};
            this.setStyle();
            this.creatByMeModal = false;
            this.getDataList();
        },
        cancelLoading(name) {
            this[name].loading = false;
            setTimeout(() => {
                this[name].loading = true;
            });
        },
        cancel(name) {
            this.$refs[name].resetFields();
            this.formValidate = {
                creator: this.USER_ID,
                name: '', //CVE编号
                useType: '', //事件描述
                eventType: '',
                survey: 0,
                file: {}, //镜像名称
                description: '', //可见范围
            };
        },
        // 计算index
        handleProIndex(key) {
            return (this.query.pageIndex - 1) * this.query.pageSize + key + 1;
        },
        // 设置知否可点击
        setIsClick(item) {
            return item.creator !== this.USER_ID && !this.isRootDesigner;
        },
        setImgSrc(item) {
            if (item.creator !== this.USER_ID && !this.isRootDesigner) {
                return require('../../assets/project/modifys.png');
            } else {
                return require('../../assets/project/modifys-h.png');
            }
        },
        setDelImgSrc(item) {
            if (item.creator !== this.USER_ID && !this.isRootDesigner) {
                return require('../../assets/project/delNote-d.png');
            } else {
                return require('../../assets/project/delNote-h.png');
            }
        },
    },
    mounted() {
        let queryObj = sessionStorage.getItem('queryObj');
        if (queryObj) {
            let params = JSON.parse(queryObj);
            this.query.pageIndex = params.page || 1;
            this.queryTerms = {
                useType: params.useType,
                name: params.name,
            };
            this.creatByMeModal = params.designer == this.USER_ID ? true : false;
            sessionStorage.removeItem('queryObj');
        }
        this.setStyle();
        window.onresize = () => {
            this.setStyle();
        };
        this.getDataList();
    },
    watch: {},
    beforeDestroy() {},
};
</script>

<style scoped>
</style>
